<template>
  <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#999">
    <van-tabbar-item icon="home-o" to="/manager/home">首页</van-tabbar-item>
    <van-tabbar-item icon="apps-o" to="/manager/category">分类</van-tabbar-item>
    <van-tabbar-item icon="shopping-cart-o" to="/manager/cart" :badge="data.gouwucheshuliang === 0 ? '' : data.gouwucheshuliang">购物车</van-tabbar-item>
    <van-tabbar-item icon="user-o" to="/manager/user">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import {reactive, ref, watchEffect} from 'vue'
import { useRoute } from 'vue-router'
import request from "@/utils/request.js";
import {showNotify} from "vant";

const route = useRoute()
const data = reactive({
  gouwucheshuliang: 0,
  user:JSON.parse(localStorage.getItem('code_user') || '{}'),
})
const active = ref(0);
watchEffect(() => {
  if (route.path.includes('/manager/home')) {
    active.value = 0
  } else if (route.path.includes('/manager/category')) {
    active.value = 1
  } else if (route.path.includes('/manager/cart')) {
    active.value = 2
  } else if (route.path.includes('/manager/user')) {
    active.value = 3
  }
})

const loadCartList = () => {
  if (data.user.id) {
    request.get('gouwuche/selectAll', {
      params: {
        userId: data.user.id
      }
    }).then(res => {
      data.gouwucheshuliang = res.data.length
    }).catch(err => {
      showNotify({ type: 'danger', message: err });
    })
  }
}
loadCartList()

</script>
